<template>
  <HuilanBasic>
    <HuilanBasicSearchbar
      :model="searchForm"
      :fields="searchFieldList"
      @search="searchChange"
      @reset="searchReset"
    >
    </HuilanBasicSearchbar>

    <!--功能配置-->
<!--    <el-table-->
<!--      :data="tableData"-->
<!--      style="width: 100%"-->
<!--      class="container-table"-->
<!--    >-->
<!--      <el-table-column prop="typeName" label="功能">-->
<!--        <template slot-scope="scope">-->
<!--          <div class="typeName-container">-->
<!--            <img class="typeName-img" :src="znhhPng" v-if="scope.row.modelType == 1"/> &lt;!&ndash;智能会话&ndash;&gt;-->
<!--            <img class="typeName-img" :src="zszqPng" v-if="scope.row.modelType == 2"/> &lt;!&ndash;知识增强&ndash;&gt;-->
<!--            <img class="typeName-img" :src="zxfzzqPng" v-if="scope.row.modelType == 3"/> &lt;!&ndash;坐席辅助&ndash;&gt;-->
<!--            <img class="typeName-img" :src="sjfxzqPng" v-if="scope.row.modelType == 4" /> &lt;!&ndash;数据分析&ndash;&gt;-->
<!--            <span>{{scope.row.typeName}}</span>-->
<!--          </div>-->

<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="businessModelName" label="模型">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.businessModelName?scope.row.businessModelName:'&#45;&#45;'}}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="businessPromatName" label="提示词">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.businessPromatName?scope.row.businessPromatName:'&#45;&#45;'}}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="status" label="状态">-->
<!--        <template slot-scope="scope">-->
<!--          <el-switch-->
<!--            v-model="scope.row.status"-->
<!--            @change="handlerStatusChange($event,scope.row)"-->
<!--          >-->
<!--          </el-switch>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="remark" label="简介">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.remark!==null?scope.row.remark:'&#45;&#45;'}}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          &lt;!&ndash;查看&ndash;&gt;-->
<!--          <el-link-->
<!--            type="primary"-->
<!--            :underline="false"-->
<!--            size="small"-->
<!--            style="margin-right: 10px"-->
<!--            @click="handlerView(scope.row)"-->
<!--          >{{$t('aiccCommon.view')}}</el-link>-->
<!--          &lt;!&ndash;编辑&ndash;&gt;-->
<!--          <el-link-->
<!--            type="primary"-->
<!--            :underline="false"-->
<!--            size="small"-->
<!--            @click="handlerEdit(scope.row)"-->
<!--            v-show="scope.row.type != 9"-->
<!--          >-->
<!--            {{$t('aiccCommon.edit')}}-->
<!--          </el-link>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

    <avue-crud
      :option="option"
      :data="tableData"
      ref="crud"
    >
      <template slot-scope="scope" slot="typeName">
        <div class="typeName-container">
          <img class="typeName-img" :src="znhhPng" v-if="scope.row.modelType == 1"/> <!--智能会话-->
          <img class="typeName-img" :src="zszqPng" v-if="scope.row.modelType == 2"/> <!--知识增强-->
          <img class="typeName-img" :src="zxfzzqPng" v-if="scope.row.modelType == 3"/> <!--坐席辅助-->
          <img class="typeName-img" :src="sjfxzqPng" v-if="scope.row.modelType == 4" /> <!--数据分析-->
          <span>{{scope.row.typeName}}</span>
        </div>
      </template>

      <template slot-scope="scope" slot="status">
        <el-switch
          v-model="scope.row.status"
          @change="handlerStatusChange($event,scope.row)"
          v-if="scope.row.type != 9"
        >
        </el-switch>

        <span v-else>--</span>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-link
          type="primary"
          :underline="false"
          size="small"
          style="margin-right: 10px"
          @click="handlerView(scope.row)"
        >{{$t('aiccCommon.view')}}</el-link>
        <!--编辑-->
        <el-link
          type="primary"
          :underline="false"
          size="small"
          @click="handlerEdit(scope.row)"
          v-show="scope.row.type != 9"
        >
          {{$t('aicosCommon.config')}}
        </el-link>
      </template>
    </avue-crud>

    <AiccDrawer
      ref="configDrawerRef"
      append-to-body
      :title="$t('aiccCommon.edit')"
      :visible.sync="isOpenConfigDrawer"
      width="550px"
      trigger="click"
      @beforeClose="beforeCloseConfigDrawer"
    >
      <template v-slot:aiccMain>
        <Config
          v-if="isOpenConfigDrawer"
          ref="configFormRef"
          :configCur="configCur"
          :clickName="clickName"
        />
      </template>
      <template v-slot:aiccFooter>
        <el-button size="small" @click="closeConfigDrawer">{{$t("aiccCommon.btnCancel") }}</el-button>
        <el-button size="small" type="primary" @click="handlerConfigSave" :loading="isFinished" v-show="clickName != 'view'">{{$t("aiccCommon.btnSave") }}</el-button>
      </template>
    </AiccDrawer>

  </HuilanBasic>
</template>

<script>
import {
  modelSettingList,
  modelSettingSave,
  modelSettingStopOrStart,
} from '@/api/aiccApi/aiccLargeModel/index';
import Config from './config.vue';
import {baseURL} from "@/api/common";
export default {
  components: {
    Config
  },
  data(){
    return {
      znhhPng: `${baseURL}/img/znhh.png`,
      zszqPng: `${baseURL}/img/zszq.png`,
      zxfzzqPng: `${baseURL}/img/zxfzzq.png`,
      sjfxzqPng: `${baseURL}/img/sjfxzq.png`,
      searchForm:{
        type:'',
        name:'',
      },
      clickName:'',
      configCur:{},
      isOpenConfigDrawer:false,
      isFinished:false,
      searchFieldList:[
        {
          type:'select',
          prop:'type',
          placeholder:this.$t('largeModel.functionClassification'), //功能分类
          dicData:[
            {
              label:this.$t('largeModel.intelligentSessionEnhancement'),  //智能会话增强
              value:'1'
            },
            {
              label:this.$t('largeModel.knowledgeEnhancement'),  //知识增强
              value:'2'
            },
            {
              label:this.$t('largeModel.agentAssistantEnhancement'),  //坐席辅助增强
              value:'3'
            },
            {
              label:this.$t('largeModel.dataAnalysisEnhancement'),  //数据分析增强
              value:'4'
            },
          ],
        },
        // {
        //   prop:'name',
        //   placeholder: this.$t('largeModel.functionName'), //功能名称
        // }
      ],
      tableData: [],
      option:{
        tip: false,
        // selection: true,
        // height: 515,
        addBtn: false,
        highlightCurrentRow: true,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        searchBtn: false,
        columnBtn: false,
        refreshBtn: false,
        stripe: false,
        menu: true,
        menuAlign: "left",
        emptyText: this.$t('aicosCommon.notData'),
        column: [
          {
            prop:"typeName" ,
            label:"功能名称",
            overHidden:true,
          },
          {
            prop:"businessModelName",
            label:"模型",
            overHidden: true,
            formatter: (val) => {
              if (val.businessModelName !== null && val.businessModelName !== '' && val.businessModelName !== undefined) {
                return val.businessModelName
              }else{
                return '--'
              }
            }
          },
          {
            prop:"businessPromatName",
            label:"提示词",
            overHidden: true,
            formatter: (val) => {
              if (val.businessPromatName !== null && val.businessPromatName !== '' && val.businessPromatName !== undefined) {
                return val.businessPromatName
              }else{
                return '--'
              }
            }
          },
          {
            prop:"status",
            label:"状态",
            overHidden: true,
          },
          {
            prop:"remark",
            label:"简介",
            overHidden: true,
            formatter: (val) => {
              if (val.remark !== null && val.remark !== '' && val.remark !== undefined) {
                return val.remark
              }else{
                return '--'
              }
            }
          }
        ],
      },
    }
  },

  mounted(){
    this.getSettingList();
  },

  methods:{
    tableRowClassName(){
      return 'boxShadow-row';
    },

    getSettingList(){
      const info = {
        current:1,
        size:20,
        name:this.searchForm.name,
        type:this.searchForm.type,
      };
      modelSettingList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          // this.page.total = Data.total;
          this.tableData = Data;
          this.tableData.forEach(item=>{
            if(item.status == 0){
              this.$set(item,'status',false)
            }else{
              this.$set(item,'status',true)
            }
            if(item.type == 1){
              // 相似问生成
              this.$set(item,'typeName',this.$t('largeModel.similarQuestionGeneration'))
            }else if (item.type == 2) {
              // 答案生成
              this.$set(item,'typeName',this.$t('largeModel.answerGeneration'))
            }else if (item.type == 3) {
              // 意图检测
              this.$set(item,'typeName',this.$t('largeModel.intentDetection'))
            }else if (item.type == 4) {
              // 问题分类聚类
              this.$set(item,'typeName',this.$t('largeModel.questionClassifyClustering'))
            }else if (item.type == 5) {
              // 文档自动提取问答对
              this.$set(item,'typeName',this.$t('largeModel.documentAutoExtract'))
            }else if (item.type == 6) {
              // 话术节点优化
              this.$set(item,'typeName',this.$t('largeModel.speechNodeOptimization'))
            }else if (item.type == 7) {
              // 意图增强
              this.$set(item,'typeName',this.$t('largeModel.intentEnhance'))
            }else if (item.type == 8) {
              // 内容改写
              this.$set(item,'typeName',this.$t('largeModel.contentRewrite'))
            }else if (item.type == 9) {
              // 机器人兜底
              this.$set(item,'typeName',this.$t('largeModel.robotFallBack'))
            }else if (item.type == 10) {
              // 用户问题扩写
              this.$set(item,'typeName',this.$t('largeModel.userQuestionExpansion'))
            }else if (item.type == 11) {
              // 节点情境话术改写
              this.$set(item,'typeName',this.$t('largeModel.nodeSceneSpeechRewrite'))
            }else if (item.type == 12) {
              // 坐席智能推荐
              this.$set(item,'typeName',this.$t('largeModel.agentIntelligentRecommend'))
            }else if (item.type == 13) {
              // 坐席智能搜索
              this.$set(item,'typeName',this.$t('largeModel.agentIntelligentSearch'))
            }else if (item.type == 14) {
              // 坐席一键转写
              this.$set(item,'typeName',this.$t('largeModel.agentIntelligentTranslation'))
            }else if (item.type == 15) {
              // 坐席智能小结
              this.$set(item,'typeName',this.$t('largeModel.agentIntelligentSummary'))
            }else if (item.type == 16) {
              // 用户画像标签
              this.$set(item,'typeName',this.$t('largeModel.userPortraitLabel'))
            }else if (item.type == 17) {
              // 数据分析
              this.$set(item,'typeName',this.$t('largeModel.dataAnalysis'))
            }
          })
        }
      })
    },

    handlerEdit(row){
      this.clickName = 'edit';
      this.configCur = row;
      this.isOpenConfigDrawer = true;
      this.$refs.configDrawerRef.open();
      this.isFinished = false;
    },

    handlerView(row){
      if (row.type != 9){
        this.clickName = 'view';
        this.configCur = row;
        this.isOpenConfigDrawer = true;
        this.$refs.configDrawerRef.open();
        this.isFinished = false;
      }else{
        this.$router.push({ name: 'kwRobotInstance' })
      }
    },

    handlerStatusChange(val,row){
      if(val){
        //启用
        const info = {
          id:row.id,
          status: 1,
          type:row.type,
          modelType:row.modelType,
        };
        modelSettingStopOrStart(info).then(res=>{
          if(res.data.code == 200){
            this.getSettingList();
            this.$message.success(this.$t('aiccCommon.successStart'));
          }
        }).catch(()=>{
          this.$set(row,'status',0)
        })
      }else{
        //停用
        const info = {
          id:row.id,
          status: 0,
          type:row.type,
          modelType:row.modelType,
        };
        modelSettingStopOrStart(info).then(res=>{
          if(res.data.code == 200){
            this.getSettingList();
            this.$message.success(this.$t('aiccCommon.successPause'));
          }
        })
      }
    },

    handlerConfigSave(){
      const component = this.$refs.configFormRef;
      const form = component.form;
      component.$refs.form.validate(valid=>{
        if(!valid){
          return
        }else{
          var info
          if (this.configCur.type == 2){
            info = {
              businessOpen:form.businessProblem? 1 : 0, //是否开启业务模式
              businessModel:form.largeModel, //业务模式大模型id
              businessTemperature:form.temperature, //业务模式温度
              businessTop:form.TopP, //业务的top-p
              businessPromat:form.tipWord, //业务模式提示词
              businessPattern:form.mode, //业务模式模式
              nonBusinessOpen:form.notBusinessProblem? 1 : 0, //是否开启非业务模式
              nonBusinessModel:form.notLargeModel, //非业务模式大模型id
              nonBusinessTemperature:form.notTemperature, //非业务模式温度
              nonBusinessTop:form.notTopP, //非业务的top-p
              nonBusinessPromat:form.notTipWord, //非业务模式提示词
              nonBusinessPattern:form.notMode, //非业务模式模式
              id:this.configCur.id,
              type:this.configCur.type,
              modelType:this.configCur.modelType,
              status:this.configCur.status ? 1 : 0,
            };
          }else if(this.configCur.type != 2){
            info = {
              businessOpen: 1 , //是否开启业务模式
              businessModel:form.largeModel, //业务模式大模型id
              businessTemperature:form.temperature, //业务模式温度
              businessTop:form.TopP, //业务的top-p
              businessPromat:form.tipWord, //业务模式提示词
              id:this.configCur.id,
              type:this.configCur.type,
              modelType:this.configCur.modelType,
              status:this.configCur.status ? 1 : 0,
            }
          }
          this.isFinished = true;
          modelSettingSave(info).then(res=>{
            if(res.data.code == 200){
              this.$message.success(this.$t('aiccCommon.successSave'));
              this.getSettingList();
              this.closeConfigDrawer();
              this.isFinished = false;
            }
          }).catch(()=>{
            this.isFinished = false;
          })
        }
      })
    },


    closeConfigDrawer(){
      this.isOpenConfigDrawer = false;
      this.$refs.configDrawerRef.close();
      this.configCur = {};
      this.isFinished = false;
    },

    beforeCloseConfigDrawer(){
      this.closeConfigDrawer()
    },

    searchChange(){
      this.getSettingList()
    },

    searchReset(){
      this.searchForm = {
        name:'',
        type:'',
      };
      this.getSettingList()
    },
  },
}
</script>

<style scoped lang="scss">
//.container-table {
//  //padding: 0 30px 0 30px;
//}
//设置表头的背景色(可以设置和页面背景色一致):
///deep/.el-table th {
//  //background-color: #00083e;
//}
//设置表每一行的背景色,字体颜色及字体粗细；
///deep/.el-table tr {
//  background-color: rgba(150, 157, 128, 0.9);
//  color: #333;
//  font-weight: 500;
//  border-radius: 12px;
//}
//去除表格每一行的下标线；
///deep/.el-table td {
//  border-bottom: none;
//}
//去除表头的下标线；
///deep/.el-table th.is-leaf {
//  border-bottom: none;
//}
//去除表格的最下边框线；
//.el-table::before {
//  height: 0;
//}
//设置表格的背景色问题(否则一般默认的背景色是白色)；
//.el-table,
//.el-table__expanded-cell {
//  //background-color: #00083e;
//}
//设置表格的行间距；
//::v-deep .el-table__body {
//  -webkit-border-vertical-spacing: 13px;
//}
//
//::v-deep .el-table .el-table__row{
//  border-radius: 12px;
//  background-color: rgb(255, 255, 255);
//  box-shadow: 0px 6px 16px 4px rgba(6, 7, 46, 0.08);
//  height: 90px;
//}

//设置标题行(th)的字体属性；
//::v-deep .el-table th > .cell {
//  //line-height: 11px;
//  //font-size: 5px;
//  //padding-left: 20px;
//}
//设置 table 中的每个 cell 的属性值；
//::v-deep .el-table .cell {
//  padding-left: 20px;
//  line-height: 58px;
//}
//设置 table 中的 th td 的 padding 值；
//::v-deep .el-table td,
//::v-deep .el-table th {
//  padding: 1px;
//}
//将表格的每一行悬停的背景色都设置为：transparent;
///deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
//  background-color: transparent;
//}
//设置插入 scope 的用于标记序号的圆；
//.table-circle {
//  width: 30px;
//  height: 30px;
//  border-radius: 50%;
//  background-color: rgb(106, 248, 18);
//  margin: 6px 5px 0 0;
//  display: inline-block;
//  text-align: center;
//  line-height: 29px;
//}
//设置插入 scope 的值考左对齐；
//.table_right{
//  float: left;
//}
//将插入 sope 的最后一个 icon 值设置为：不显示；
//.table_right:last-of-type {
//  /deep/.el-icon-right {
//    display: none;
//  }
//}
// 设置 Element-ui 小图标的属性；
//.el-icon-right{
//  width: 20px;
//  height: 20px;
//  padding: 0 5px 0 5px;
//  color: red;
//}

.typeName-container{
  display: flex;
  align-items: center;
  .typeName-img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}
</style>
